iT邦幫忙

0

[Vue]ElementUI组件模板之自動完成el-autocomplete

  • 分享至 

  • xImage
  •  

1.原本的input 改為 el-autocomplete
並加上 :fetch-suggestions="querySearch"

<el-autocomplete
  v-model="var"
  :fetch-suggestions="querySearch"
  :placeholder=""
  size="small"
></el-autocomplete>

2.在data中加入一個 restaurants: [],(假設)

  data() {
    return {
      restaurants: [],

3.在method加入這兩個函式

  methods: {
    querySearch(queryString, cb) {
      var restaurants = this.restaurants;
      var results = queryString
        ? restaurants.filter(this.createFilter(queryString))
        : restaurants;
      cb(results);
    },
    createFilter(queryString) {
      return (restaurant) => {
        try {
          return restaurant.value.indexOf(queryString) >= 0;
        } catch (e) {}
      };
    },

4.取api回來將內容存放在 this.restaurants (完成)

    async querylist() {
      const olist = await queryList();
      var _list = olist.data.result;
      _list.map((item, key) => {
        this.restaurants[key] = {
          value: item.name,
        };
      });
    },

完成後應該會出現
https://ithelp.ithome.com.tw/upload/images/20210623/20058095IhzWy2F2Ua.jpg


圖片
  直播研討會
圖片
{{ item.channelVendor }} {{ item.webinarstarted }} |
{{ formatDate(item.duration) }}
直播中

尚未有邦友留言

立即登入留言